<template>
  <div class="meetingHall-container">
    <el-tabs v-model="activeTags" type="border-card">
      <el-tab-pane label="快速会议" name="ongoing">
        <div class="addMeeting">
          <el-button type="primary" @click="add(1)">创建快速会议</el-button>
        </div>
        <div class="meeting-content">
          <meeting-card
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            @select="cardSelect"
          ></meeting-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="预定会议" name="reserve">
        <div class="addMeeting">
          <el-button type="primary" @click="add(0)">创建预定会议</el-button>
        </div>
        <div class="meeting-content">
          <meeting-card
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            @select="cardSelect"
          ></meeting-card>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全部会议" name="all">
        <div class="addMeeting">
          <el-dropdown>
            <el-button type="primary">
              创建会议
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="add(1)">快速</el-dropdown-item>
                <el-dropdown-item @click="add(0)">预定</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="meeting-content">
          <meeting-card
            v-for="(item, index) in list"
            :key="index"
            :item="item"
            @select="cardSelect"
          ></meeting-card>
        </div>
      </el-tab-pane>
    </el-tabs>
    <add-meeting ref="addmeeting" @success="addSuceess"></add-meeting>
  </div>
</template>
<script>
  import { ref, onActivated, reactive, computed } from 'vue'
  import meetingCard from './components/meetingCard'
  import { meetingList, close } from '@/api/modules/meeting.js'
  import addMeeting from './components/addMeeting.vue'
  export default {
    // 待诊患者
    name: 'meetingHall',
    components: { meetingCard, addMeeting },
    setup() {
      const d = reactive({ activeTags: null, isShow: false, meetings: {} })
      const activeTags = ref('ongoing')
      // 加载方法
      const loadData = async function (params) {
        const res = await meetingList(params)
        d.meetings = res.data
      }

      const add = function (type) {
        isShow.value = !isShow.value
        addmeeting.value.init(null, type)
      }
      const list = computed(() => {
        if (
          d.meetings.meeting_info_list &&
          Array.isArray(d.meetings.meeting_info_list)
        ) {
          if (activeTags.value === 'ongoing') {
            return d.meetings.meeting_info_list.filter(
              (item) => item.type === 1
            )
          } else if (activeTags.value === 'reserve') {
            return d.meetings.meeting_info_list.filter(
              (item) => item.type === 0
            )
          } else {
            return d.meetings.meeting_info_list
          }
        }
        return []
      })
      const addSuceess = function () {
        d.meetings = {}
        loadData(d.meetings)
      }
      onActivated(() => {
        loadData(d.meetings)
      })
      const cardSelect = async function (obj) {
        if (obj.key === 3) {
          await close(obj.value)
          addSuceess()
        } else if (obj.key === 1) {
          // await find(obj.value)
          addmeeting.value.init(obj.value.meeting_id, 0, obj.value)
        }
      }
      const isShow = ref(true)
      const addmeeting = ref(null)
      return {
        activeTags,
        isShow,
        add,
        d,
        addmeeting,
        cardSelect,
        addSuceess,
        list,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .meetingHall-container {
    padding: 32px;
    .el-tabs {
      overflow: hidden;
      background-color: white;
      min-height: calc(100vh - 112px);
      .el-divider--horizontal {
        margin: 12px 2px;
      }
      .addMeeting {
        display: flex;
        justify-content: flex-end;
      }
      .meeting-content {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
    }
  }
</style>
